<template>
  <view :class="themeClass" v-show="loading" :style="'padding-bottom: calc(var(--window-bottom) + 50px);'">
    <u-navbar :placeholder="true" bgColor="#1D1D29" @rightClick="back" leftIconSize="0">
      <view slot="center" class="search-box">
        <view style="width: 500rpx; margin-left: 30rpx">
          <u-search
            @search="search"
            searchIconColor="#7F818C"
            placeholderColor="#7F818C"
            borderColor="#28282E"
            bgColor="#1D1E23"
            height="64rpx"
            :showAction="false"
            placeholder="请输入搜索要出售的卡券"
          ></u-search>
        </view>
      </view>
    </u-navbar>
    <view :class="themeClass" class="flex bg-070708" style="padding-top: 20rpx">
      <!-- 循环的左侧标题 -->
      <scroll-view :class="themeClass" scroll-y class="bg-151518 scroll-left" scroll-with-animation :scroll-left="scrollLeft">
        <view class="left-menu-item font28" :class="indexx == TabCur ? 'active' : ''" v-for="(items, indexx) in navlis" :key="indexx" @tap="tabSelect" :data-id="indexx">
          {{ items.title }}
        </view>
      </scroll-view>
      <!-- 线条 -->
      <view :style="'height: ' + contentHeight + 'px;'" class="aaaa"></view>
      <!-- 循环右侧卡种 -->
      <scroll-view @scroll="handlerScroll" class="flex-1 bg-070708" scroll-y :style="'height: ' + contentHeight + 'px;'" :scroll-into-view="scrollIntoId">
        <view :id="'card' + ind" class="padding-0-28" v-for="(ite, ind) in navlis" :index="ind">
          <view class="divider">
            <u-divider textColor="#EFE0C0" lineColor="#4B4B57" :text="ite.title"></u-divider>
          </view>
          <!-- 图片 名字 -->
          <view class="cu-list menu-avatar" :class="'cuitem' + ite.cid">
            <view class="card-item margin-bottom-sm" @tap="toChild" v-for="(item, index) in list[ite.cid]" :data-id="item.cid" :data-typeid="ind + 32">
              <image style="width: 90rpx; height: 90rpx; border-radius: 8rpx" :src="item.img" mode="aspectFit"></image>
              <u-gap height="12rpx"></u-gap>
              <view :class="themeClass" class="font24">{{ item.title }}</view>
              <view :class="themeClass" style="margin-top: 3">{{ item.max_feilv }}</view>
            </view>
          </view>
        </view>
        <u-gap height="120rpx"></u-gap>
      </scroll-view>
    </view>
    <v-footer :tab="'card'" :bgColor="bgC" class="buttonmenu"></v-footer>
    <!-- <v-footer tab="card" class="buttonmenu"></v-footer> -->
    <!-- #ifdef MP-WEIXIN -->
    <v-kefu @tap="tokefu()"></v-kefu>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view @click="tokefu()" class="">
      <v-kefu></v-kefu>
    </view>
    <!-- #endif -->
    <v-popup @update:isShow="isShow = $event" :isShow="isShow"></v-popup>
  </view>
</template>

<script>
let _this;
import footer from '@/components/footer.vue';
import kefu from '@/components/kefu.vue';
import popup from '@/components/popup.vue';
export default {
  components: { 'v-footer': footer, 'v-kefu': kefu, 'v-popup': popup },
  data() {
    return {
      PageCur: 'card',
      loading: false,
      TabCur: 0,
      cid: 0,
      navlis: [],
      barHeight: 0,
      scrollLeft: 0,
      scrollLeftp: 0,
      isheight: 500,
      list: [],
      scrolls: 0,
      startX: 0, //滑动开始x轴位置
      startY: 0, //滑动开始y轴位置
      moveX: 0, //滑动的x轴距离
      moveY: 0, //滑动的y轴距离
      like_state: 0, //-1：左滑，0：没滑动，1：右滑
      listloading: true,
      istouchStart: false,
      onPageScroll: false,
      contentHeight: 0,
      scrollIntoId: '',
      heightList: [],
      isClick: false,
      isShow: 0, //控制客服弹出层
      currentTheme: '', //背景色
      bgC: false
    };
  },
  onShow() {
    var that = this;
    this.bgC = that.app.background;
    this.currentTheme = this.getTheme();

    uni.hideTabBar();
    let ops = {
      type: uni.getStorageSync('a') || 0
    };
    console.log(this.navlis, 2);
    if (ops.type != null && ops.type != undefined) {
      this.TabCur = parseInt(ops.type);
    } else {
      this.TabCur = 0;
    }
    this.cid = this.navlis[this.TabCur].cid;
    console.log('asdkadsh', this.navlis);
    console.log(this.cid, this.TabCur, 'cid');
    _this = this;
    this.loading = false;
    uni.showLoading({
      title: '加载中...'
    });
    this.getData(true);
  },
  onLoad(ops) {
    this.currentTheme = this.getTheme();
    this.isShow = false;
    let sysInfo = uni.getStorageSync('sysTem');
    this.contentHeight = sysInfo.screenHeight - 50;

    // #ifdef MP-WEIXIN || MP-ALIPAY
    const { top, bottom } = uni.getMenuButtonBoundingClientRect();
    this.contentHeight = sysInfo.screenHeight - bottom - 50;
    // #endif
    console.log('contentHeightcontentHeightcontentHeight', this.contentHeight);

    this.barHeight = uni.getSystemInfoSync().statusBarHeight;
    this.navlis = JSON.parse(uni.getStorageSync('navlist'));
  },
  onPageScroll() {
    if (this.onPageScroll) return;
    var _this = this;
    uni.getSystemInfo({
      success: (e) => {
        let info = uni.createSelectorQuery().select('.cuitem' + _this.cid);
        info
          .boundingClientRect(function (data) {
            //data - 各种参数
            _this.isheight = data.height;
            console.log(data.height + '??', _this.cid); // 获取元素宽度
          })
          .exec();
      }
    });
    this.onPageScroll = true;
  },
  // 计算属性返回css样式
  computed: {
    themeClass() {
      return `theme-${this.currentTheme}`;
    }
  },
  methods: {
    // 获取本地样式
    getTheme() {
      return uni.getStorageSync('theme') || 'dark';
    },
    // 点击客服
    tokefu() {
      console.log(445);
      this.isShow = !this.isShow;
    },
    back() {
      uni.redirectTo({
        url: '/pages/index/index',
        animationType: 'pop-in',
        animationDuration: 200
      });
    },
    handlerScroll(e) {
      const { scrollTop } = e.detail;
      console.log(this.heightList);
      const offset = 600;
      this.heightList.forEach((item, index) => {
        console.log(222, item);
        if (scrollTop >= item - offset && !this.isClick) {
          console.log(123456);
          this.TabCur = index;
        }
      });
      if (scrollTop == 0) {
        this.TabCur = 0;
        console.log(88888);
      }
    },
    getCateHeight() {
      this.$nextTick(() => {
        this.heightList = [];
        this.navlis.forEach((item, index) => {
          const query = uni.createSelectorQuery().in(this);
          console.log('dataqueryquery', query);
          // #ifdef MP-WEIXIN
          query
            .select('#card' + index)
            .boundingClientRect((data) => {
              console.log('data****', data);
              this.heightList.push(data.top);
            })
            .exec();
          // #endif
          // #ifdef APP
          query
            .select('#card' + index)
            .boundingClientRect((data) => {
              // 这里的data就是元素的布局信息，包括top、right、bottom、left、width、height等
              this.heightList.push(data.top);
              // 你可以根据需要处理这些数据，比如保存到data中
            })
            .exec(); // 执行查询
          // #endif
          // #ifdef MP-ALIPAY

          my.createSelectorQuery()
            .selectAll('#card' + index)
            .boundingClientRect()
            .exec((data) => {
              let nodeData = data[0][0];
              console.log('data****', nodeData);
              this.heightList.push(nodeData.top);
            });
          // #endif
        });
      });
    },
    getData(flag) {
      this.listloading = true;
      uni.request({
        method: 'post',
        url: _this.app.apiHost + '/card',
        header: { Authorization: '' },
        success: (data) => {
          if (data.data.code == 0) {
            let da = data.data.data;
            console.log(888888, data.data.data);
            _this.list = da;
            console.log(99999, this.list);
            _this.loading = true;
            uni.hideLoading();
            _this.scrollLeft = (_this.TabCur - 2) * 60;
            let width = 0;
            uni.getSystemInfo({
              success: (e) => {
                width = e.windowWidth;
              }
            });

            _this.scrollLeftp = _this.TabCur * width;
            _this.listloading = false;
            if (flag) {
              this.isClick = true;
              setTimeout(() => {
                this.getCateHeight();
              }, 500);
              setTimeout(() => {
                _this.scrollIntoId = 'card' + this.TabCur;
                console.log(_this.scrollIntoId);
              }, 200);

              setTimeout(() => {
                this.isClick = false;
              }, 1000);
            }
          } else {
            _this.app.showMsg('数据错误');
          }
        },
        fail(a) {
          _this.app.showMsg('链接失败');
        }
      });
    },

    tabchang(id) {
      if (id < 0) id = 0;
      if (id > this.navlis.length - 1) id = this.navlis.length - 1;
      this.TabCur = id;
      console.log(7845121121, id);
      this.scrollLeft = (this.TabCur - 2) * 60;
      let width = 0;
      uni.getSystemInfo({
        success: (e) => {
          width = e.windowWidth;
        }
      });
      this.scrollLeftp = this.TabCur * width;
      this.cid = this.navlis[this.TabCur].cid;
      var that = this;
      let info = uni.createSelectorQuery().select('.cuitem' + this.cid);
      info
        .boundingClientRect(function (data) {
          //data - 各种参数
          that.isheight = data.height;
        })
        .exec();
      this.scrolls = 0;
    },
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      this.isClick = true;
      this.cid = this.navlis[this.TabCur].cid;
      this.scrollIntoId = 'card' + this.TabCur;
      setTimeout(() => {
        this.isClick = false;
      }, 500);
    },
    toChild(e) {
      console.log('2222', e);
      let type = e.currentTarget.dataset.typeid,
        cid = e.currentTarget.dataset.id;
      uni.setStorageSync('cid', cid);
      uni.setStorageSync('typeid', type);
      console.log('卡卷页面参数', 'cid', cid, 'type', type);
      uni.navigateTo({
        url: '../index/card?cid=' + cid + '&typeid=' + type
      });
    },
    search(e) {
      console.log(e);
      uni.setStorageSync('keyword', e);
      uni.navigateTo({
        url: '../index/search?keys=' + e
      });
    },
    touchStart(event) {
      this.istouchStart = false;
      this.startX = Math.abs(event.touches[0].pageX);
      this.startY = event.touches[0].pageY;
      if (this.onPageScroll) return;
      var _this = this;
      uni.getSystemInfo({
        success: (e) => {
          let info = uni.createSelectorQuery().select('.cuitem' + _this.cid);
          info
            .boundingClientRect(function (data) {
              //data - 各种参数
              _this.isheight = data.height;
              console.log(data.height + '??', _this.cid); // 获取元素宽度
            })
            .exec();
        }
      });
      this.onPageScroll = true;
    },
    touchMove(event) {
      this.istouchStart = true;
      var currentX = Math.abs(event.detail.scrollLeft);
      var moveX = currentX - this.startX;
      var text = '';
      var state = 0; //-1：左滑，0：没滑动，1：右滑
      if (event.detail.deltaX < 0) {
        text = '左滑';
        state = 1;
      } else {
        text = '右滑';
        state = -1;
      }
      this.like_state = state;
      this.moveX = moveX;
    },
    touchEnd(event) {
      console.log(7897789987798);
      if (Math.abs(this.moveX) > 60 && this.like_state != -100 && this.istouchStart === true) {
        var state = this.like_state;
        this.like_state = -100; //设置这个数是为了避免滑动之后点击不走touchMove而产生的不正常滑动
        if (state == 1) {
          this.tabchang(this.TabCur + 1);
        } else {
          this.tabchang(this.TabCur - 1);
        }
        this.moveX = 0;
      }
    }
  }
};
</script>

<style lang="scss">
.aaaa {
  width: 3rpx;
  background-color: #4b4b57;
}
/* 定义主题样式 */
.theme-dark {
  background-color: #151518 !important;
  // color: #fff !important;
  color: #ffefcd !important;
}

.theme-light {
  background-color: #fff;
  color: #000;
}
.weihu {
  pointer-events: none; /* 阻止所有鼠标事件 */
}
/* #ifdef MP-ALIPAY */
/deep/.u-navbar {
  background-color: #1d1d29;
}
/deep/.u-status-bar {
  height: 0 !important;
}
/deep/.u-navbar__placeholder {
  height: 88rpx !important;
}
/* #endif */
/deep/.u-divider {
  margin: 0 !important;
}
.bg-070708 {
  // background-color: #070708;
}
.padding-0-28 {
  padding: 0 28rpx;
}
.search-box {
  width: 100%;
}
.scroll-left {
  width: 200rpx;
}
.left-menu-item {
  height: 88rpx;
  color: #a2a2be;
  padding-left: 58rpx;
  line-height: 88rpx;
  box-sizing: border-box;
  &.active {
    color: #efe0c0;
    font-size: 30rpx;
    // background-color: #070708;
    border-left: 4rpx solid #efe0c0;
  }
}
.divider {
  padding: 52rpx 68rpx 36rpx 68rpx;
}
.menu-avatar > .card-item {
  height: 182rpx;
  border-radius: 10rpx;
  display: inline-block;
  width: 137rpx;
  margin-left: 28rpx;
  text-align: center;
  font-size: 24rpx;
  color: #b2b2d3;
  vertical-align: bottom;
  // background-color: #070708 !important;
}
.margin-bottom-sm {
  margin-bottom: 32rpx;
}
</style>
